<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    :align-center="true"
    :append-to-body="true"
    width="700px"
    @close="handleCloseModal"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="200px">
      <el-form-item label="主商家" prop="parentMerchantNo">
        <el-select
          v-model="formData.parentMerchantNo"
          :disabled="isEdit"
          placeholder="请选择主商家"
          @change="handleParentMerchantChange"
        >
          <el-option
            v-for="item in store"
            :key="item.merchantNo"
            :label="item.name"
            :value="item?.merchantNo ?? ''"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="支付通道">
        <span>{{ channelName }}</span>
      </el-form-item>
      <template v-if="formData.parentMerchantNo">
        <el-form-item label="银联商户号" prop="merCupNo">
          <el-input
            v-model="formData.merCupNo"
            placeholder="请输入银联商户号"
          />
        </el-form-item>
        <el-form-item label="专业化扫码支付终端号" prop="termProfessionNo">
          <el-input
            v-model="formData.termProfessionNo"
            placeholder="请输入专业化扫码支付终端号"
          />
        </el-form-item>
        <el-form-item label="B2B收银台-扫码终端号" prop="termNo">
          <el-input
            v-model="formData.termNo"
            placeholder="请输入B2B收银台-扫码终端号"
          />
        </el-form-item>
        <el-form-item label="B2B收银台-银行卡终端号" prop="termCardNo">
          <el-input
            v-model="formData.termCardNo"
            placeholder="请输入B2B收银台-银行卡终端号"
          />
        </el-form-item>
        <el-form-item label="实体终端号" prop="vposId">
          <el-input v-model="formData.vposId" placeholder="请输入实体终端号" />
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleCloseModal">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import PaymentAPI, { PaymentStoreVO, PaymentSubStoreVO } from "@/api/payment";

const emits = defineEmits(["success", "update:visible"]);

const props = defineProps<{
  data: PaymentSubStoreVO;
  visible: boolean;
}>();

const title = computed(() => (props.data.id ? "编辑" : "新增"));

const dialogVisible = computed<boolean>({
  set(val) {
    emits("update:visible", val);
  },
  get() {
    return props.visible;
  },
});

const handleParentMerchantChange = (val: string) => {};

const handleCloseModal = () => {
  dialogVisible.value = false;
};

const formData = ref<PaymentSubStoreVO>({
  parentMerchantNo: "",
  merCupNo: "",
  termProfessionNo: "",
  vposId: "",
  // B2B收银台-扫码终端号
  termNo: "",
  // B2B收银台-银行卡终端号
  termCardNo: "",
});

const rules = {
  parentMerchantNo: [{ required: true, message: "请选择主商家" }],
  merCupNo: [{ required: true, message: "请输入银联商户号" }],
  // termProfessionNo: [{ required: true, message: "请输入专业化扫码支付终端号" }],
  // vposId: [{ required: true, message: "请输入实体终端号" }],
};

const success = () => {
  handleCloseModal();
  emits("success");
};

const formRef = ref();
const isEdit = computed(() => !!props.data.id);

const channelName = computed(() => {
  const current = store.value.find(
    (item) => item.merchantNo === formData.value.parentMerchantNo
  );
  return current?.channelTypeName || "";
});

const handleSubmit = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      const { id } = formData.value;
      if (id) {
        PaymentAPI.updateSubStore(formData.value).then((res) => {
          ElMessage.success("修改成功");
          success();
        });
      } else {
        PaymentAPI.addSubStore(formData.value).then((res) => {
          ElMessage.success("添加成功");
          success();
        });
      }
    }
  });
};

const store = ref<PaymentStoreVO[]>([]);

onMounted(() => {
  PaymentAPI.getStoreOptions().then((res) => {
    store.value = res;
  });
});

watchEffect(() => {
  if (props.data.id) {
    formData.value = props.data;
  } else {
    formData.value = {
      parentMerchantNo: "",
      merCupNo: "",
      termProfessionNo: "",
      vposId: "",
      termNo: "",
      termCardNo: "",
    };
  }
});
</script>

<style scoped></style>
